<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
    <div id="top">
        <img src="/imgs/logo.png" alt="" style="margin-left: 50px; position: relative;">
        <span style="line-height: 80px; position: absolute; left: 150px;">智能小程序</span>
            <div id="top-right">
                <a>开发文档</a>
                <a>交流中心</a>
                <a>服务市场</a>
                <a>开源联盟</a>
                <a>管理中心</a>
            </div>
    </div>
    <p id="imgCenter">百度前端训练营2021开营了，赶紧报名吧！</p>
    <img style="width: 100%" src="./imgs/top.jfif" alt="">
    <div id="againBaoming">
        <p>您已完成报名开始的你学习之旅吧！</p>
        <span onclick="again()">重新报名</span>
    </div>
    <div id="baoming">
        <div id="school">
            选择您的学校<br>
            <div id="show-0">
                <input type="text" readonly="readonly">
                    <div id="schoolSelect" >
                        <div id="province" style="overflow-x:scroll">
                            
                        </div>
                        <div id="univer" style="overflow-x:auto">
                        </div>
                    </div>
            </div>
        </div>
        <div id="year">
            选择您入学年份<br>
            <div id="show-1">
                <input type="text" readonly="readonly">
                    <div id="yearSelect">
                        
                    </div>
            </div>
        </div>
        <div id="email">
            请输入您的电子邮箱<br>
            <input type="text" id="inputEmail">
        </div>
            <button id="submit" type="submit" style="outline: none;border: 1px solid #ccc;" onclick='sub()'>报名</button> 
    </div>
        <div id="message"></div>
    <div id="mid">
        <div id="mid-top">
            <h1>我们的宗旨</h1>
        <div class="midAim">
            <h2>自律独立思考</h2>
            <img src="./imgs/自律独立思考.png" alt="">
        </div>
        <div class="midAim">
            <h2>实践</h2>
            <img src="./imgs/实践.png" alt="">
        </div>
        <div class="midAim">
            <h2>总结回顾</h2>
            <img src="./imgs/总结回顾.png" alt="">
        </div>
        <div class="midAim">
            <h2>分享交流</h2>
            <img src="./imgs/分享交流.png" alt="">
        </div>
        </div>
        <div id="mid-bottom">
            <h1 style="text-align: center;">课程安排</h1>
            <div id="select">
                <a onclick="selectAll()">全部</a>
                <a onclick="selectHtml()">HTML</a>
                <a onclick="selectCss()">CSS</a>
                <a onclick="selectJs()">JavaScript</a>
            </div>
        <div class="midPlan" id="plan-0">
            <div>
                <img src="./imgs/头像.png" >
                <div class="midPlan-content" >
                    <h2>第一课 这里是课程名字</h2>
                    <p>这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要.</p>
                    <span id="midPlan-html" name="one">HTML</span>
                </div>
            </div>
        </div>
        <div class="midPlan" id="plan-1">
            <img src="./imgs/头像.png" alt="">
            <div class="midPlan-content" >
                <h2>第二课 这里是课程名字</h2>
                <p>这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要.</p>
                <span id="midPlan-css" name="two">CSS</span>
            </div>
        </div>
        <div class="midPlan" id="plan-2">
            <img src="./imgs/头像.png" alt="">
            <div class="midPlan-content" >
                <h2>第三课 这里是课程名字</h2>
                <p>这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要.</p>               
                <span id="midPlan-js" name="three">JavaScript</span>
            </div>
        </div>
        <div class="midPlan" id="plan-3">
            <img src="./imgs/头像.png" alt="">
            <div class="midPlan-content">
                <h2>第四课 这里是课程名字</h2>
                <p>这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要.</p>                
                <span id="midPlan-html">HTML</span>
                <span id="midPlan-css">CSS</span>
                <span id="midPlan-js">JavaScript</span>
            </div>
        </div>
        <div class="midPlan" id="plan-4">
            <img src="./imgs/头像.png" alt="">
            <div class="midPlan-content">
                <h2>第五课 这里是课程名字</h2>
                <p>这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要.</p>                
                <span id="midPlan-css">CSS</span>
                <span id="midPlan-js">JavaScript</span>
            </div>
        </div>
        <div class="midPlan" id="plan-5">
            <img src="./imgs/头像.png" alt="">
            <div class="midPlan-content">
                <h2>第六课 这里是课程名字</h2>
                <p>这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要,这里是课程内容的概要，这里是课程内容的概要.</p>                
                <span id="midPlan-html">HTML</span>
                <span id="midPlan-css">CSS</span>
            </div>
        </div>
        </div>
    </div>
    <div id="bottom">
        <div id="bottom-centent">
            <div id="bottom-left">
                <span>I</span>
                <span>F</span>
                <span>E</span>
            </div>
        <div id="bottom-right">
            <div class="bottomLinks">
                <h1>Links</h1>
                <p>百度技术培训中心</p>
                <p>百度技术</p>
                <p>技术培训中心</p>
                <p>百度技术培训中心</p>
                <p>百度技术</p>
            </div>
            <div class="bottomLinks">
                <h1>Links</h1>
                <p>百度技术培训中心</p>
                <p>百度技术</p>
                <p>技术培训中心</p>
                <p>百度技术培训中心</p>
                <p>百度技术</p>
            </div>
            <div class="bottomLinks">
                <h1>Links</h1>
                <p>百度技术培训中心</p>
                <p>百度技术</p>
                <p>技术培训中心</p>
                <p>百度技术培训中心</p>
                <p>百度技术</p>
            </div>
        </div>
        </div>
    </div>
    <script src="邮箱及其报名.js"></script>
    <script src="学校选择.js"></script>
    <script src="年份选择.js"></script>
    <script src="筛选.js"></script>
</body>
</html>